<template>
  <div class="page-content">
    <div class="text-right" v-if="viewMode">
      <el-button size="small" class="mb-2 d-print-none" @click="handlePrint">
        <i class="fa fa-print"></i>
        打印
      </el-button>
    </div>
    <div :id="printId" class="p-5">
      <div v-loading="loading" class="print-content">
        <h4 class="text-center">担保申请书（{{ isPerson ? '自然人' : '法人' }}）</h4>

        <h5 class="pt-5"><span class="underline">贵州省农业信贷融资担保股份有限公司：</span></h5>
        <div v-if="isPerson">
          <div class="text-indent pt-3">
            本人
            <span class="underline">{{ relatedData.corp_name }}</span>
            ，身份证号码为：
            <span class="underline">{{ relatedData.lender_idcard }}</span>
            ，现拟从
            <span class="underline">{{ relatedData.bank_name }}（银行）</span>
            ，贷款
            <span class="underline">{{ relatedData.apply_funds }}</span>
            万元，用于
            <span class="underline">{{ relatedData.funds_use_dir }}</span>
            。现申请贵公司作为本人的贷款担保人。
          </div>
          <div class="text-indent pt-2">
            本人保证所提交的申请材料真实无误。如有不实，本人将承担由此引起的一切法律责任。
          </div>

          <div class="py-5">申请人签字：</div>
          <div class="text-right text-sign mt-5">
            年 &nbsp;&nbsp;&nbsp;&nbsp;月 &nbsp;&nbsp;&nbsp;&nbsp;日
          </div>
        </div>
        <div v-else>
          <div class="text-indent pt-3">
            我公司
            <span class="underline">{{ relatedData.customer_name }}（单位全称）</span>
            ，统一社会信用代码为：
            <span class="underline">{{ relatedData.register_no }}</span>
            ，现拟从
            <span class="underline">{{ relatedData.bank_name }}（银行）</span>
            ，贷款
            <span class="underline">{{ relatedData.apply_funds }}</span>
            万元，用于
            <span class="underline">{{ relatedData.funds_use_dir }}</span>
            。现申请贵公司作为我公司的贷款担保人。
          </div>
          <div class="text-indent pt-2">
            我公司保证所提交的申请材料真实无误。如有不实，我公司将承担由此引起的一切法律责任。
          </div>

          <div class="py-5">申请单位公章：</div>
          <div>法定代表人（签章）</div>
          <div>或授权代理人（签章）</div>
          <div class="text-right text-sign mt-5">
            年 &nbsp;&nbsp;&nbsp;&nbsp;月 &nbsp;&nbsp;&nbsp;&nbsp;日
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'
export default {
  props: {
    isPerson: {
      type: Boolean,
      default: false,
    },
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    viewMode() {
      return true
    },
    queryId() {
      return this.relatedData.customer_related_id
    },
    printId() {
      return `application-${this.queryId}`
    },
  },
  created() {},
  methods: {
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        .print-content {
          border: 1px solid $border-color;
          padding: 2rem;
          background-color: #fefefe;
          max-width: 700px;
          margin: 0 auto;
          font-size: 1.2rem;
          line-height: 2;
        }
        .text-indent {
          text-indent: 2.4rem;
        }
        .text-sign {
          margin-right: 80px;
        }
        .underline {
          border-bottom: 1px solid gray;
        }
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.page-content {
  border: 1px solid $border-color;
  padding: 2rem;
  background-color: #fefefe;
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 2;
}
.text-indent {
  text-indent: 2.4rem;
}
.text-sign {
  margin-right: 80px;
}
.underline {
  border-bottom: 1px solid gray;
}
</style>
